<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- write a element with specified id property to be bind by vue mount() -->
    <div id="app">
        <button @click="insert()">add</button>
        <ul>
            <!-- statements in v-for belong to js language(as string as v-for value) -->
            <li v-for="item in listFruits">
                {{item}}
            </li>
        </ul>

        <!-- now lets try to improve the render logic with v-for instruction -->
        <img :src="src" alt="imgs">
        <ul>
            <button v-for="item,index in listImgs" @click="changePic(index)">
                {{index+1}}
            </button>
        </ul>
    </div>
    <!-- import vue cdn: -->
    <script src="https://unpkg.com/vue@next"></script>
    <script>
        Vue.createApp({
            data() {
                /* images to show and test */
                alice = "https://gitee.com/xuchaoxin1375/pictures/raw/main/images/alice.jpg"
                aprilFirst_sqare = "https://gitee.com/xuchaoxin1375/pictures/raw/main/images/AprilFirst_square.png"
                aprilFirst_smoke = "https://gitee.com/xuchaoxin1375/pictures/raw/main/images/smoke.jpg"
                
                flamePillar_gold="https://gitee.com/xuchaoxin1375/pictures/raw/main/images/gold.jpg"
                return {
                    listFruits: ["banana", "apple"],
                    /* for test imgs src */
                    src:alice,
                    listImgs: [
                        alice,
                        aprilFirst_sqare,
                        aprilFirst_smoke,
                        flamePillar_gold
                    ]
                }
            },
            /* methods part */
            methods: {
                insert() {
                    this.listFruits.push("🍓 ")
                },
                changePic(index) {
                    this.src = this.listImgs[index]
                }
            }
        }).mount("#app")

    </script>
</body>

</html>